<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            width: 360px;
            border: 1px solid #000;
            margin: 100px auto;
            padding-top: 360px;
            background: url("../img/05big.jpg") no-repeat;
        }
        #box ul{
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id = "box">
        <ul>
            <li id="li01"><img src="../img/01.jpg" alt=""></li>
            <li id="li02"><img src="../img/02.jpg" alt=""></li>
            <li id="li03"><img src="../img/03.jpg" alt=""></li>
            <li id="li04"><img src="../img/04.jpg" alt=""></li>
            <li id="li05"><img src="../img/05.jpg" alt=""></li>
        </ul>
    </div>
    <script>
        window.addEventListener("load",function(){
            // 1、获取标签
            let li01 = document.getElementById('li01');
            let li02 = document.getElementById('li02');
            let li03 = document.getElementById('li03');
            let li04 = document.getElementById('li04');
            let li05 = document.getElementById('li05');

            let box = document.getElementById('box');

            //2、监听鼠标进入事件
            li01.addEventListener("click",()=>{
                box.style.background = `url("../img/01big.jpg") no-repreat`;
                console.log("我点击了")
            });

            li02.addEventListener("click",()=>{
                box.style.backgroundImage=`url(../img/02big.jpg)`; 
                console.log("我点击了")
                
            });

            li03.addEventListener("click",()=>{
                box.style.background = `url("../img/e_coder_normal.png") no-repreat`;
                console.log("我点击了")
            });

            li04.addEventListener("click",()=>{
                // box.style.background = 'url("../img/04big.jpg") no-repreat';
                box.style.background= `url("../img/e_coder_normal.png") no-repeat`;
                console.log("我点击了")
            });

            li05.addEventListener("click",function(){
                box.style.background = `url("../img/e_coder_normal.png") no-repeat`
                console.log("我点击了")
            });
        })


        // 改进1-------------------
        // window.onload = function(){
        //     function $(id){
        //         return typeof id === 'string' ? document.getElementById('id') :null;
        //     }
        //     function changeImg(liId,Index){
        //         $(liId).onclick = function(){
        //             box.style.background = `url("../img/0${index}big.jpg") no-repreat`
        //         }
        //     }

        //     changeImg("li01",1);
        //     changeImg("li02",2);
        //     changeImg("li03",3);
        //     changeImg("li04",4);
        //     changeImg("li05",5);
        // }
        
    </script>
</body>
</html>